<template>
  <view class="container">
    <pap-navbar title="添加验收记录" back bgColor="white" />
    <view class="grow min-h-0">
      <view class="bg-white" style="padding: 0 32rpx">
        <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
        <u--form
          labelPosition="left"
          :model="formModel"
          :rules="rules"
          ref="uForm"
          labelWidth="100"
        >
          <u-form-item
            label="验收时间"
            prop="time"
            borderBottom
            @click="
              showPicker = true
              hideKeyboard()
            "
          >
            <u--input v-model="formModel.time" border="none"></u--input>
          </u-form-item>
          <u-form-item label="运输方量" prop="quantity" borderBottom>
            <view class="flex align-center">
              <u--input
                v-model="formModel.quantity"
                border="none"
                placeholder="请输入运输方量"
              ></u--input>
              <view>m³ </view>
            </view>
          </u-form-item>
          <u-form-item label="验收结果" prop="result" borderBottom>
            <u-radio-group
              v-model="formModel.result"
              placement="row"
              @change="groupChange"
              style="column-gap: 48rpx !important"
            >
              <u-radio
                v-for="(item, index) in radiolist"
                :key="index"
                :label="item.label"
                :name="item.name"
              >
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item
            label="处理方式"
            prop="method"
            borderBottom
            @click="
              showSex = true
              hideKeyboard()
            "
          >
            <u--input
              v-model="formModel.method"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择处理方式"
              border="none"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="说明" prop="description" borderBottom>
            <u--textarea
              v-model="formModel.description"
              placeholder="请输入内容"
            ></u--textarea>
          </u-form-item>
        </u--form>
      </view>
      <u-action-sheet
        :show="showSex"
        :actions="actions"
        title="请选择性别"
        description="如果选择保密会报错"
        @close="showSex = false"
        @select="sexSelect"
      >
      </u-action-sheet>

      <u-datetime-picker
        :show="showPicker"
        v-model="formModel.time"
        mode="datetime"
      ></u-datetime-picker>
    </view>
    <view class="opreation-group">
      <button class="TimUi-btn block bgc-52D9">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      showSex: false,
      formModel: {
        time: new Date(),
        quantity: null,
        result: null,
        method: '',
        description: ''
      },
      radiolist: [
        {
          label: '合格',
          name: '0',
          disabled: false
        },
        {
          label: '不合格',
          name: '1',
          disabled: false
        }
      ],
      actions: [
        {
          name: '男'
        },
        {
          name: '女'
        },
        {
          name: '保密'
        }
      ],
      rules: {
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'userInfo.sex': {
          type: 'string',
          max: 1,
          required: true,
          message: '请选择男或女',
          trigger: ['blur', 'change']
        }
      },
      radio: '',
      switchVal: false
    }
  },
  methods: {
    sexSelect(e) {
      this.formModel.userInfo.sex = e.name
      this.$refs.uForm.validateField('userInfo.sex')
    },
    groupChange(n) {
      console.log('groupChange', n)
    }
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  }
}
</script>

<style lang="scss" scoped></style>
